<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>条件渲染</title>
    <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--    v-if 指令 start-->
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
    <!--    v-if 指令 end-->
    <!--    v-show 指令 start-->
    <h1 v-show="ok">Hello!</h1>
    <!--    v-show 指令 end-->
</div>
<script type="text/javascript">
    var vm = new Vue({
        el : "#app",
        data : {
            type : "B",
            ok : true
        }
    });
</script>
<style type="text/css">

</style>
</body>
</html>
